import React, { PureComponent } from "react";
import { View } from "react-native";
import { Button, Text, Input } from "react-native-tengits-elements";
import MQTTClient from "../libs/MQTTClient";
import Utils from "../libs/Utils";

const CLIENTID = "123456";
let testClient = null;
export default class MQTTClientTestPage extends React.PureComponent {
    constructor() {
        super();
        this.state = {
            ip:"127.0.0.1",
            port:"1883",
            userName: "",
            pwd: "",
        }
    }

    render() {
        const{ip, port, userName, pwd} = this.state;
        return <View style={{flex:1, backgroundColor:'white', padding:30, justifyContent:'space-around'}}>
                <View style={{flexDirection:'column'}}>
                    <Input
                        placeholder='ip'
                        defaultValue={this.state.ip}
                        onChangeText={value => this.setState({ ip: value })}
                        />
                    <Input
                        placeholder='port'
                        defaultValue = {`${this.state.port}`}
                        onChangeText={value => this.setState({ port: value })}
                        />
                    <Input
                        placeholder='username'
                        onChangeText={value => this.setState({ userName: value })}
                        />
                    <Input
                        placeholder='password'
                        onChangeText={value => this.setState({ pwd: value })}
                        />
                </View>
                <View style={{flexDirection:'row', height:80,}}>
                <Button
                    title="获取本机IP"
                    onPress={async()=>{
                        let ip = await Utils.getMachineIp();
                        this.setState({
                            ip:ip
                        })
                        console.log("ip:",ip);
                    }}
                    />
                <Button
                    title="连接测试"
                    onPress={async()=>{
                        MQTTClient.createClient("test", {
                            uri: 'tcp://192.168.2.95:1883', 
                            clientId: '123456'
                          }).then(function(client) {
                            testClient = client;
                            client.on('closed', function() {
                              console.log('mqtt.event.closed');
                              
                            });
                            
                            client.on('error', function(msg) {
                              console.log('mqtt.event.error', msg);
                              
                            });
                          
                            client.on('message', function(msg) {
                              console.log('mqtt.event.message', msg);
                            });
                          
                            client.on('connect', async function() {
                              console.log('connected');
                              client.subscribe(['/data'], [0]);
                              //console.log("subret:",subret);
                              client.publish('/data', "test", 0, false);
                            });
                          
                            client.connect();
                          }).catch(function(err){
                            console.log(err);
                          });
                    }}
                    />
                <Button
                    title="订阅测试"
                    onPress={async()=>{
                        if(testClient) {
                            MQTTClient.removeClient(testClient);
                        }
                    }}
                    />
                <Button
                    title="取消订阅测试"
                    onPress={async()=>{
                        
                        console.log("unsubscriber:",ret);
                    }}
                    />
                <Button
                    title="批量订阅测试"
                    onPress={async()=>{
                       
                        console.log("subscribers:",ret);
                    }}
                    />
                <Button
                    title="批量取消订阅测试"
                    onPress={async()=>{
                       
                        console.log("unsubscribers:",ret);
                    }}
                    />
                <Button
                    title="消息发送测试"
                    onPress={async()=>{
                        
                        console.log("publish:",ret);
                    }}
                    />
                </View>
        </View>
    }

}